<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>js事件</title>
    <script>
        function aaa(){
            alert("hello world");
        }
    </script>
</head>
<body>
    <button onclick="javascript: aaa()">点我</button>

    <div style="width:200px;height:50px; background-color: #96dbff" onmouseover="this.innerHTML='hello';" onmouseout="this.innerHTML='';">

    </div>

    <div id="idname" name="">通过id获取元素</div>
    <div id="classname">通过class 名获取元素</div>
    <div id="classname">通过class 名获取元素</div>

    <script>
        div = document.getElementById("idname")
        div.style.backgroundColor="red";

        divs = document.getElementsByClassName("classname");
        console.log(divs);
        divs[0].innerHTML = "hello";

        document.getElementsByName("");

        // 创建新节点 插入到网页中
        // div.childNodes
        mydiv = document.createElement("div")
        mydiv.style.height="300px";
        mydiv.style.backgroundColor = "blue";
        div.appendChild(mydiv);
    </script>
</body>
</html>


<!--
事件: event 鼠标或热键引发的动作。例如鼠标单击、鼠标悬停。

常用事件:
onclick  单击
ondbclick double 双击
onfocus  获得焦点。 当用户点击一个表单中的input框准备输入时。
onblur   失去焦点。从一个表单中一个input框离开时。
onmouseover  鼠标移到某个元素上
onmouseout   鼠标移除某个元素
onkeypress   键盘按键按下并松开
onsubmit

-->

<!--DOM
回顾2html图例,引入以下概念。
DOM: document  object model 文档对象模型。整个网页html标签,下面有head、body标签,body标签下包含p、h1、img等。整个网页是文档树，每一个元素是一个节点。body标签是p、h1标签的父节点，p节点就是body节点子节点child。

js操作dom场景:
动态弹出对话框,子网页，改变样式,改变菜单，增加互交体验。
动态请求后端接口获取信息，增加数据安全防爬取。
前后端分离,js负责跟后端交互数据。
js网页特效。
表单验证。

js选择标签常用方法;
document.getElementById("idname") 返回一个节点
document.getElementsByClassName("classname")  返回节点组成的数组
document.getElementsByName("");

节点.innerHTML   改变标签中的内容
节点.style       改变标签样式

-->